
<script setup lang="ts">
  import { Device, ZIndexManager } from "@bidiao/framework";

  const tooltipElement = ref<HTMLDivElement | null>(null);

  onMounted(() => {
    document.body.appendChild(tooltipElement.value);
  });
  onBeforeUnmount(() => {
    document.body.removeChild(tooltipElement.value);
  });

  /**
   * 第三方登录
   */
  const externalLogins = [
    {
      name: "Dingtalk",
      displayName: "钉钉",
    },
    {
      name: "qq",
      displayName: "QQ",
    },
    {
      name: "weixin",
      displayName: "微信",
    },
    {
      name: "csdn",
      displayName: "CSDN",
    },
    {
      name: "baidu",
      displayName: "百度",
    },
    {
      name: "alipay",
      displayName: "支付宝",
    },
    {
      name: "weibo",
      displayName: "微博",
    },
    {
      name: "tiktok",
      displayName: "抖音",
    },
  ];

  const filterExternalLogins = Device.Mobile ? externalLogins.slice(0, 5) : externalLogins;

  let tooltipLeaveTimer: number;
  function onExternalLoginMouseEnter(item) {
    const tooltipElm = tooltipElement.value;
    tooltipElm.innerText = item.displayName;
    const rect = (event.target as HTMLButtonElement).getBoundingClientRect();
    tooltipElm.style.display = "block";
    tooltipElm.style.left = rect.left + rect.width / 2 - 6 + "px";
    tooltipElm.style.top = rect.top - 4 + "px";
    // 判断当前层级是否最高
    if (tooltipElm.style.zIndex !== ZIndexManager.zIndex.toString()) {
      tooltipElm.style.zIndex = ZIndexManager.nextZIndex().toString();
    }

    if (tooltipLeaveTimer) {
      clearTimeout(tooltipLeaveTimer);
    }
  }
  function onExternalLoginMouseLeave() {
    const tooltipElm = tooltipElement.value;
    if (tooltipLeaveTimer) {
      clearTimeout(tooltipLeaveTimer);
    }
    tooltipLeaveTimer = setTimeout(() => {
      tooltipElm.style.display = "none";
    }, 100);
  }
</script>

<template>
  <fieldset v-if="filterExternalLogins.length">
    <legend class="text-center mb-1">第三方登录</legend>
    <form class="third-login d-flex justify-content-evenly">
      <button v-for="item in filterExternalLogins"
              :key="item.name"
              class="d-inline-flex align-items-center justify-content-center text-white align-middle p-0 border-box border-0 rounded-circle hover-scale third-login-icon"
              name="provider"
              :style="{'--icon-bg-color':`var(--cms-bg-${item.name.toLowerCase()})`}"
              type="submit"
              :value="item.name"
              @mouseenter="() => onExternalLoginMouseEnter(item)"
              @mouseleave="onExternalLoginMouseLeave">
        <i class="icon cms"
           :class="`cms-${item.name.toLowerCase()}`"></i>
      </button>
    </form>
    <div ref="tooltipElement"
         class="tooltip py-2 px-3 rounded position-absolute pe-none"></div>
  </fieldset>
</template>

<style lang="scss" scoped>
  .third-login {
    > .third-login-icon {
      font-size: 32px;
      width: 1em;
      height: 1em;
      background-color: var(--icon-bg-color);
    }
  }
  .tooltip {
    display: none;
    background-color: rgba(var(--theme-black-rgb), 0.75);
    transform: translate(-50%, calc(-100% - 5.5px));
    color: var(--theme-white);
    transition: all 0.1s ease-out;
    z-index: 1;

    &::after {
      content: " ";
      position: absolute;
      font-size: 0;
      width: 0;
      height: 0;
      border: 4px solid transparent;
      border-top-color: rgba(var(--theme-black-rgb), 0.75);
      border-right-color: rgba(var(--theme-black-rgb), 0.75);
      top: 100%;
      left: 50%;
      transform: translate(0, -1px);
    }
  }
</style>
